<template>
	<div class="htotal">
		<div class="hTop">
			<div class="hselect">
				<a href="javascript:history.back(-1)" class="iconfont icon-lunbozuofangun hleftfan"> </a>
				<a href="#/search">
					<input type="text" placeholder="轻薄本下单立减千元"/>
				</a>
				<a href="javascript:void(0)" class="iconfont icon-icon- haselect"></a>
				<a href="javascript:void(0)" class="iconfont icon-more hmore" @click="shenglue"></a>
				<div class="hshenglue">
					<span class="hsquare"></span>
					<ul class="hmore_xiala">
						<li class="h_shouye" @click="h_shouye"><span  class="iconfont icon-shouye hwidth"></span><span class="hhright">首页</span><hr style="width: 60%;margin-left:40%;margin-bottom: -0.1rem;opacity: 0.4;"/></li>
						<li class="h_fenlei" @click="fenlei"><span  class="iconfont icon-fenlei hhwidth"></span><span class="hhright">分类</span><hr style="width: 60%;margin-left:40% ;margin-bottom: -0.1rem;opacity: 0.4;"/></li>
						<li class="h_shopping" @click="shopping"><span class="iconfont icon-daohanggouwuche hhwidth"></span><span class="hhright">购物车</span><hr style="width: 60%;margin-left:40% ;margin-bottom: -0.1rem;opacity: 0.4;"/></li>
						<li class="h_my" @click="usercenter"><span class="iconfont icon-gerenzhongxin hhwidth"></span><span class="hhright">我的</span></li>
					</ul>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:"select1",
		data(){
			return{
				bol:true
			}
		},
		methods:{
			h_shouye:function(){
				window.location.href="#/";
			},
			fenlei:function(){
				//刷新一下页面
				window.location.reload();
			},
			shopping:function(){
				window.location.href="#/car";
			},
			usercenter:function(){
				window.location.href="#/usergeren";
			},
			shenglue:function(){
				if(this.bol==true){
					$(".hshenglue").css("display","block");
				}else{
					$(".hshenglue").css("display","none");
				}
				this.bol=!this.bol;
		}
	}
	
}
	
		$(function(){
		var lis= $(".hmore_xiala li");
			for(var i=0;i<lis.length;i++){
				lis[i].onclick=function(){
				}
			}
		})
	
</script>

<style scoped>
	html,body,div,ul,li,a,span,h3,img,hr{margin: 0;padding:0;}
	img{vertical-align: top;}
	html,body{height: 100%;}
	body{position: relative;top: 0;}
	/*总控*/
.htotal{width: 100%;height: 100%;}
.hTop{width: 100%;margin: 0 auto;}
/*上方搜索框*/
.hselect{width: 92%;padding:0.5rem 0;position: relative;margin: 0 auto;text-align: center;line-height: 1.5rem;}
.hselect a{text-decoration: none;color: grey;}
.hselect input{border-radius: 0.75rem;width: 72%;height:1.5rem;outline: none; border: 1px solid #D2D2D2;}
.hselect input[placeholder]{padding-left: 0.5rem;}
.hleftfan{position: absolute;left: 0;}
.haselect{position: absolute;left: 80%;top: 25%;}
.hmore{position:absolute;right: 0;font-size: 2rem;color: grey;}
ul li{list-style-type: none;}
/*更多按钮下拉框*/
.hsquare{width:1rem; height:1rem;display: inline-block;border-width:1px 0 0 1px; border-style: solid;border-color:#ccc;transform: rotate(45deg);position: absolute;right: 0.8rem;top: -0.55rem;background-color: white;}
.hshenglue{width: 35%;position: absolute;top: 120%;right: 0;border-radius: 5px;float: right;display: none;background: rgba(255,255,255,1);box-shadow: 0 0 2px 1px #ccc;z-index: 99;}
.hmore_xiala{width: 100%;}
.hmore_xiala li{text-align: left;line-height: 2.4rem;font-size: 1.2rem;z-index: 100;height: 2.5rem;}
/*图标公共样式*/
.hmore_xiala li span{vertical-align:middle;}
.hwidth{font-size: 2rem;padding: 0 1rem;line-height: 1.5rem; display:inline-block;}
.hhwidth{font-size: 1.5rem;padding: 0.5rem 1.3rem;line-height: 1.5rem; display:inline-block ;}

/*首页等*/
.hhright{width: 100%;height:100%;padding-bottom: 2%;}

</style>